<template>
   <div>
       <div id="container" ref="container" @click="showHotPointMsg"></div>
   </div>
</template>

<script lang='ts'>
   import { computed, getCurrentInstance, ref, watch,onMounted,defineComponent, toRaw } from 'vue';
   import { threeOrb,threeOrbInit } from '../../utils/orbitUtil';
   import { templateRef } from '@vueuse/core';
   let $THREE = window.THREE;
   export default defineComponent({
       props:{},
       data(){
           return{
               scene:new $THREE.Scene(),
               poiObjects:[]
           }
       },
       setup(props,context){
            let {ctx}:any = getCurrentInstance();
            const container = templateRef<any>('container');
            const camera = ref<any>(null);
            const renderer = ref<any>(null);
            const points = ref<any[]>([]);

            let p1 = new $THREE.Vector3(10,8,12);
            let p2 = new $THREE.Vector3(20,30,-10);
            let L = p1.clone().sub(p2);
            console.log(L);

            // const poiObjects = ref([]);
            points.value = [
                {
                    position:{
                        x:0,
                        y:0,
                        z:-0.2
                    },
                    detail:{
                        "title":"热爱105摄氏度的你"
                    }
                },
                {
                    position:{
                        x:-0.2,
                        y:-0.05,
                        z:0.2
                    },
                    detail:{
                        "title":"你不知道你有多可爱"
                    }
                }
            ];
            //模拟初始化结束


            const initThree =()=>{
                //场景
                let ch = document.body.clientHeight;
                let cw = document.body.clientWidth;
                //镜头
                camera.value = new $THREE.PerspectiveCamera(90, cw / ch, 0.1, 100);
                camera.value.position.set(0, 0, 0.01);
                //渲染器
                renderer.value = new $THREE.WebGLRenderer();
                renderer.value.setSize(cw,ch);
                container.value.appendChild(renderer.value.domElement);
                //镜头控制器
                let controls = new $THREE.OrbitControls(camera.value, renderer.value.domElement);
                controls.enableDamping = true;
                //一会儿在这里添加3D物体
                useSphere();

                initPoints(toRaw(points.value));

                loop();
            }

            //帧同步重绘
            const loop =()=> {
                requestAnimationFrame(loop);
                renderer.value.render(ctx.scene, camera.value);
            }

            const useSphere =()=>{
                //创建一个球体
                let sphereGeometry = new $THREE.SphereGeometry(1, 50, 50);
                sphereGeometry.scale(1, 1, -1);
                // sphereGeometry.rotateY(180*Math.PI/180);
                // 创建球体的纹理
                let texture = new $THREE.TextureLoader().load('/scene.jpeg');
                let sphereMaterial = new $THREE.MeshBasicMaterial({map: texture});
                // var sphereGeometry = new THREE.SphereGeometry(50, 20, 20);
                let sphere = new $THREE.Mesh(sphereGeometry,sphereMaterial);
                // sphere.material.wireframe  = true;
                ctx.scene.add(sphere);
            }

            const initPoints =(hotPoints:any)=>{
                let pointTexture = new $THREE.TextureLoader().load('/hot.png');
                let material = new $THREE.SpriteMaterial( { map: pointTexture} );
                for(let i=0;i<hotPoints.length;i++){
                    let sprite = new $THREE.Sprite(material);
                    sprite.scale.set( 0.1, 0.1, 0.1 );
                    sprite.position.set( hotPoints[i].position.x, hotPoints[i].position.y, hotPoints[i].position.z );      
                    ctx.scene.add( sprite );
                    sprite.detail = hotPoints[i].detail;
                    ctx.poiObjects.push(sprite);
                }
            }

            const showHotPointMsg =(event:any)=>{
                event.preventDefault();
                let ch = document.body.clientHeight;
                let cw = document.body.clientWidth;
                let raycaster = new $THREE.Raycaster();
                let mouse = new $THREE.Vector2();
                mouse.x = ( event.clientX / cw ) * 2 - 1;
                mouse.y = - ( event.clientY / ch ) * 2 + 1;
                raycaster.setFromCamera( mouse, camera.value );
                let intersects = raycaster.intersectObjects(ctx.poiObjects);
                if(intersects.length>0){
                    alert(intersects[0].object.detail.title);
                }
            }

            function onWindowResize() {
                window.history.go(0);
                initThree();
            }
            // 添加window 的resize事件监听
            window.addEventListener('resize',onWindowResize);

            onMounted(()=>{
                initThree();
            })

           return{
               camera,
               renderer,
               showHotPointMsg
           }
       },
       components:{
       }
   })
</script>

<style scoped>
</style>
